<template>
    <div>
        <h2>人数统计</h2>
        <div id="one"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import http from '../api/apis'

type EChartsOption = echarts.EChartsOption;


var option: EChartsOption;




onMounted(() => {
    var chartDom = document.getElementById('one')!;
    var myChart = echarts.init(chartDom);

    http('/chartDataOne').then(res => {
        let ydata = res.data.map(val => val.title)
        let xdata = res.data.map(val => val.num)

        option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, '1'],
                    [57.1, 78254, '2'],
                    [74.4, 41032, '3'],
                    [50.1, 12755, '4'],
                    [89.7, 20145, '5'],
                    [68.1, 79146, '6'],
                    [19.6, 91852, '7'],
                    [10.6, 101852, '8'],
                    [32.7, 20112, '9']
                ]
            },
            xAxis: {
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            },
            yAxis: {
                type: "category",
                data: ydata,
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            },
            grid: {
                top: "3%",
                left: "2%",
                bottom: "3%",
                right: "6%",
                containLabel: true

            },
            series: [
                {
                    type: 'bar',
                    data: xdata,
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };

        option && myChart.setOption(option);

    })
})




</script>

<style scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;

}

#one {
    height: 4.0667rem;
}
</style>